<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<title>宽带预约</title>
<link rel="stylesheet" href="../../template/assets/css/amazeui.min.css"/>
<link rel="stylesheet" href="../../template/website/css/app.css"/>
<style type="text/css">
  .am-scrollable-vertical {
    height: 24rem;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    resize: vertical;
  }
  .style-select {
    height:3rem;
    -webkit-appearance:none;
    appearance:none;
    border:none;
    font-size:1.3rem;
    padding:0 .5rem;
    display:block;
    width:90%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    background-color: #fff;
  }
  .style-border {
    border:1px solid #ccc;
  }
  .style-background-color {
    background-color: #eee;
  }
</style>
</head>
<body>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm">
    <div class="am-u-sm-12 am-u-md-12">
      <span class="am-text-default">宽带套餐：</span>
      <span class="am-text-primary am-text-sm" id="name"></span>
    </div>
  </div>
  <!--用户信息-->
  <div class="am-g am-g-collapse am-margin-top-sm am-btn-default am-text-default">
    <div class="am-u-sm-12 am-text-center am-padding-xs">用户信息</div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1">
      <span class="am-text-danger">*</span>客户称呼：
    </div>
    <div class="am-u-sm-9 am-u-md-11">
      <div class="am-form-group">
        <label class="am-radio-inline" style="width:25%;">
          <input type="radio" name="gender" value="0" data-am-ucheck checked required/>先生
        </label>
        <label class="am-radio-inline" style="width:25%;">
          <input type="radio" name="gender" value="1" data-am-ucheck />女士
        </label>
      </div>
    </div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs">
      <span class="am-text-danger">*</span>客户姓名：
    </div>
    <div class="am-u-sm-9 am-u-md-11">
      <input class="am-form-field am-text-sm" type="text" id="cust-name" placeholder="请输入客户姓名" maxlength="10" />
    </div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs">
      <span class="am-text-danger">*</span>办理电话：
    </div>
    <div class="am-u-sm-9 am-u-md-11">
      <input class="am-form-field am-text-sm" type="text" id="telephone" maxlength="11" required placeholder="请输入办理电话"/>
    </div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm ">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs"></div>
    <div class="am-u-sm-9 am-u-md-11 am-text-right">
      <input class="am-btn am-btn-primary am-text-sm" type="button" id="verify-code-btn" value="获取验证码" />
    </div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs">
      <span class="am-text-danger">*</span>验证码：
    </div>
    <div class="am-u-sm-9 am-u-md-11">
      <input class="am-form-field am-text-sm" type="text" id="verify-code" maxlength="11" required placeholder="请输入短信验证码"/>
    </div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs">
      <span class="am-text-danger">*</span>其他联系电话：
    </div>
    <div class="am-u-sm-9 am-u-md-11">
      <input class="am-form-field am-text-sm" type="text" id="telephone-other" maxlength="11" required placeholder="请输入其他联系电话"/>
    </div>
  </div>
  <!--安装地址-->
  <div class="am-g am-margin-top am-btn-default am-text-default">
    <div class="am-u-sm-12 am-text-center am-padding-xs">预约信息</div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs">
      地市：
    </div>
    <div class="am-u-sm-9 am-u-md-11">
      <div class="am-cf style-border style-background-color">
        <select class="style-select style-background-color am-fl" id="city" disabled>
          <option value="" selected></option>
        </select>
        <i class="am-icon-caret-down am-margin-top-xs"></i>
      </div>
    </div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs">
      区县：
    </div>
    <div class="am-u-sm-9 am-u-md-11">
      <div class="am-cf style-border">
        <select class="style-select am-fl" id="area">
          <script type="text/x-handlebars-template" id="amz-tpl">
            {{#if list}}
              {{#each list}}
                {{#compare name '!=' ''}}
                  <option value="{{code}}" {{#compare @index '==' 0}} selected{{/compare}}>{{name}}</option>
                {{/compare}}
              {{/each}}
            {{/if}}
          </script>
        </select>
        <i class="am-icon-caret-down am-margin-top-xs"></i>
      </div>
    </div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs">
      <span class="am-text-danger">*</span>安装小区:
    </div>
    <div class="am-u-sm-9 am-u-md-11">
      <input class="am-form-field am-text-sm" type="text" id="village" placeholder="请输入安装小区"/>
    </div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs"></div>
    <div class="am-u-sm-9 am-u-md-11 am-text-right">
      <input class="am-btn am-btn-primary am-text-sm" type="button" id="search-btn" value="搜索" />
    </div>
  </div>
  <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs">
      <span class="am-text-danger">*</span>详细地址:
    </div>
    <div class="am-u-sm-9 am-u-md-11">
      <input class="am-form-field am-text-sm" type="text" id="address" placeholder="请输入详细地址"/>
    </div>
  </div>
  <div id="expected-install-time" class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-1 am-padding-xs">
      <span class="am-text-danger">*</span>期望安装时间：
    </div>
    <div class="am-u-sm-9 am-u-md-11">
    <input type="date" id="install-date" class="am-form-field am-text-sm" placeholder="请输入期望安装时间"/>
    </div>
  </div>
  <!--底部分隔-->
  <div class="am-g am-margin-vertical-sm"></div>
  <!--提示信息模态框-->
  <div class="am-modal am-modal-no-btn" tabindex="-1" id="modal">
    <div class="am-modal-dialog">
      <div class="am-modal-hd">
        <i class="am-icon-refresh am-icon-spin"></i>
        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
      </div>
      <div class="am-modal-bd">
                        数据加载中...
      </div>
    </div>
  </div>
  <!--地址选择弹框-->
  <div class="am-modal am-modal-no-btn" tabindex="-1" id="popup">
    <div class="am-modal-dialog">
      <div class="am-modal-hd">
        <!-- <i class="am-padding-xs"></i> -->
        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
      </div>
      <div class="am-modal-bd am-text-left am-text-sm">
        <!--有结果-->
        <div id="has-result">
          <div id="ts-title-has">
            根据您的输入信息&nbsp;<span id="ts-address" class="am-text-danger"></span>&nbsp;，为您找到以下地址，请选取1个就近的地址，以完成预约：
          </div>
          <ul id="address-list" class="am-list am-list-static am-list-striped am-scrollable-vertical"></ul>
          <div id="load-more" class="am-text-center am-hide">
            加载更多...
          </div>
        </div>

        <!--无结果-->
        <div id="has-no-result" class="am-hide">
          <div id="ts-title-no">
            根据您的输入信息&nbsp;<span id="ts-address-no" class="am-text-danger"></span>&nbsp;，未找到符合条件的小区，请输入您的具体地址（小区详细地址），我们将尽快安排宽带建设，感谢您的反馈。
          </div>
          <textarea cols="20" class="am-form-field am-text-sm am-margin-vertical-xs" id="feedback"></textarea>
          <div id="btns-no" class="am-text-right">
            <input class="am-btn am-btn-default am-text-sm am-margin-right-xs" type="button" value="取消" data-am-modal-close/>
            <input class="am-btn am-btn-primary am-text-sm" type="button" id="submit-btn" value="提交反馈" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--底部导航-->
  <div class="am-g am-topbar am-topbar-fixed-bottom">
    <div class="am-u-sm-8 am-text-xs am-margin-top-xs am-padding-top-sm">
      已选择 <span class="am-text-primary" id="broadband-name"></span>
      <input type="hidden" id="accessType" />
      <input type="hidden" id="buildaddresId" />
      <input type="hidden" id="netAttr" />
      <input type="hidden" id="areaCode" />
      <input type="hidden" id="areaName" />
    </div>
    <div class="am-u-sm-4 am-btn-primary am-text-center" id="broadband-reservation-btn" style="padding: 1.2rem 0">立即预约</div>
  </div>
  <script type="text/x-handlebars-template" id="address-tpl">
    {{#addressList list class="address-style"}}{{/addressList}}
  </script>
  <script type="text/javascript" src="../../template/assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="../../template/assets/js/amazeui.min.js"></script>
  <script type="text/javascript" src="../../template/assets/js/handlebars.min.js"></script>
  <script type="text/javascript" src="../../template/assets/js/amazeui.widgets.helper.min.js"></script>
  <script type="text/javascript" src="../../template/website/js/app.js"></script>
  <script type="text/javascript" src="../../template/website/js/campus/broadband.reservation.js?v=2"></script>
</body>
</html>